<template>
  <div>
    <!-- <IsDog></IsDog> -->
    <!-- <IsDog2></IsDog2> -->

    <!-- <SelDog
      v-for="(item, index) in arr"
      :key="index"
      :imgurl="item.dogImgUrl"
      :dogname="item.dogName"
      @arr1="fn"
    ></SelDog> -->
    <IsDog04
      v-for="(item, index) in arr"
      :key="index"
      :imgurl="item.dogImgUrl"
      :dogname="item.dogName"
      @arr1="fn"
    ></IsDog04>
    <hr />
    <p>显示喜欢的狗:</p>
    <ul>
      <li v-for="(item, index) in arr1" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
// import IsDog from "./components/IsDog.vue";
// import IsDog2 from "./components/IsDog02.vue";
// import SelDog from "./components/SelDog.vue";
import IsDog04 from "./components/IsDog04.vue";
export default {
  data() {
    return {
      arr: [
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "博美",
        },
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "泰迪",
        },
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "金毛",
        },
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "萨摩耶",
        },
      ],
      arr1: [],
    };
  },
  components: {
    // IsDog,
    // IsDog2,
    // SelDog,
    IsDog04,
  },
  methods: {
    fn(dogName) {
      this.arr1.push(dogName);
    },
  },
};
</script>

<style scoped></style>
